<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>uploadImage</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style:none;
        }
        body {
            font:0.24rem/1 "microsoft yahei";
        }
        #layout {
            max-width: 750px;
            min-width: 320px;
            width: 100%;
            margin: 0 auto;
            position: relative;
            background-color: #f59e00;
        }
        .row {
            margin:1rem 0.6rem 0;
            height:2rem;
            background-color: #f7e1b5;
            clear: both;
        }
        .row>ul{
            height: 100%;
        }
        .upload-part {
            float: left;
            width:50%;
            height: 100%;
            background-color: #e4b9b9;
            position: relative;
        }
        .upload-box {
            margin:0 0.2rem;
            height: 100%;
            background-color: #FCF8E3;
            overflow: hidden;
            position: relative;
        }
        input.upload {
            position: absolute;
            width:100%;
            height: 100%;
            top:0;
            left:0;
        }
        .upload-part .del {
            width: 0.3rem;
            height: 0.3rem;
            background-color: #ff5658;
            border-radius: 50%;
            position: absolute;
            top:0;
            right:0;
            z-index:99999;
            text-align: center;
            color: #ffffff;
            /*-webkit-transform: translate(-50%,-50%);*/
            /*-moz-transform: translate(-50%,-50%);*/
            /*-ms-transform: translate(-50%,-50%);*/
            /*-o-transform: translate(-50%,-50%);*/
            transform: translate(-20%,-50%);
        }
        canvas {
            display: none;
        }
        ul img {
            width: 100%;
            border:0 none;
            vertical-align: middle;
        }
        .cover {
            width: 100%;
            height: 100%;
            position: absolute;
            z-index:11;
            top:0;
            left:0;
            /*background-color: ;*/
            background:rgba(0,0,0,0.5) url('./rotate.gif') center center no-repeat;
        }
        .cover::before {

        }
        /*.rotate-bar {*/
            /*position: absolute;*/
            /*width: 25px;*/
            /*height: 2px;*/
            /*left:50%;*/
            /*top:50%;*/
            /*-webkit-transform: translate(-50%,-50%);*/
            /*-moz-transform: translate(-50%,-50%);*/
            /*-ms-transform: translate(-50%,-50%);*/
            /*-o-transform: translate(-50%,-50%);*/
            /*transform: translate(-50%,-50%);*/
            /*transform-origin: left;*/
            /*animation:rotate linear 0.3s infinite;*/
        /*}*/
        /*.rotate-bar::before {*/
            /*content: '';*/
            /*position: absolute;*/
            /*width: 15px;*/
            /*height: 2px;*/
            /*right:0;*/
            /*top:0;*/
            /*background-color: #fff;*/

        /*}*/

        @keyframes rotate {
            from {transform: rotate(0deg);}
            to {transform: rotate(360deg);}
        }
        @media (min-width:120px){html{font-size:40px}}
        @media (min-width:320px){html{font-size:44px}}
        @media (min-width:375px){html{font-size:50px}}
        @media (min-width:410px){html{font-size:56px}}
        @media (min-width:455px){html{font-size:60px}}
        @media (min-width:510px){html{font-size:80px}}
        @media (min-width:610px){html{font-size:90px}}
        @media (min-width:750px){html{font-size:100px}}
    </style>
</head>
<body>
    <div id="layout">
        <canvas id="uploadCanvas"></canvas>
        <ul>

        </ul>
        <li class="row">
            <ul>
                <li class="upload-part">
                    <div class="upload-box">
                        <input class="upload" type="file" name="hehe" accept="image/*" />
                        <p></p>
                        <div class="res"></div>
                        <!--<div class="cover"></div>-->
                    </div>
                    <i class="del">x</i>
                </li>
            </ul>
        </li>
        <li class="row">
            <ul>
                <li class="upload-part">
                    <div class="upload-box">
                        <input class="upload" type="file" name="hehe" accept="image/*" />
                        <p></p>
                        <div class="res"></div>
                        <div class="cover">
                            <!--<span class="rotate-bar"></span>-->
                        </div>
                    </div>
                </li>
                <li class="upload-part">
                    <div class="upload-box">

                    </div>
                </li>
            </ul>
        </li>

    </div>
    <!--<div class="upload">-->
        <!--<input class="upload" type="file" name="hehe" accept="image/*" />-->
        <!--<canvas class="canvas" width="300"  ></canvas>-->
        <!--&lt;!&ndash;<ul id="box" style="width:300px">&ndash;&gt;-->

        <!--&lt;!&ndash;</ul>&ndash;&gt;-->
    <!--</div>-->
    <script src="jquery-xxx.min.js"></script>
    <script>
//        $(".cover").hide();
        var $row=$(".row");
        var uploadCanvas=$("#uploadCanvas")[0];
        var ctx=uploadCanvas.getContext('2d');
        console.log($row.width());
        var uploadBox=$(".upload-box").width();
        uploadBox=450;
        console.log(uploadBox);
        var $upload=$(".upload");
        $upload.off("change").on("change",function (e) {
            var $this=$(this);
            var selfFiles=this.files;
            var img=new Image();
            var $p=$(this).parent().find("p");
            var file = selfFiles[0];//获取input输入的图片
            if(!/image\/\w+/.test(file.type)){
                alert("请确保文件为图像类型");
                return false;
            }//判断是否图片，在移动端由于浏览器对调用file类型处理不同，虽然加了accept = 'image/*'，但是还要再次判断
            var reader = new FileReader();
            reader.readAsDataURL(file);//转化成base64数据类型
            reader.onload = function(e){
                console.log(this);
                img.src="";
                img.src=this.result;
                img.onload=function () {
                    var imgWidth=img.naturalWidth;
                    var imgHeight=img.naturalHeight;
                    var ctxImgHeight= (uploadBox)*(imgHeight/imgWidth);
                    console.log(ctxImgHeight);
                    uploadCanvas.width=uploadBox;
                    uploadCanvas.height=ctxImgHeight;
                    ctx.clearRect(0, 0, uploadBox, ctxImgHeight);
                    ctx.drawImage(img,0,0,uploadBox,ctxImgHeight);
                    var strDataURI = uploadCanvas.toDataURL("image/jpg",0.98);
//                    console.log(strDataURI);
                    $p.html('<img src="'+strDataURI+'">');
                    $.ajax({
                        url: "http://121.40.178.164:4040/agent-service/api/upload/uploadBase64.do",
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            fileName:"ABC"+new Date().getTime(),
                            folder:"house",
                            agentId:"789",
                            base64Data:strDataURI,
                            token:"0D7D4BA3E65955921553827C646874BF"
                        },
                        beforeSend:function (data) {
                            $this.parent().find('.cover').show();
                        },
                        success:function (data) {
                            console.log(data);
                            $this.parent().find(".res").html('<img src="http://121.40.178.164:4040'+data.res.data.filePath+'">');
                            $this.parent().find('.cover').hide();
                        }
                    });
                };

//                console.log(this.result);
            };
        });

        $(".upload-part").off("click").on("click",".del",function (e) {
            var $this=$(this);

        });
    </script>
</body>
</html>